import React  from 'react';
import PropTypes from 'proptypes';
import debounce from 'lodash/debounce';
import Button from '@mui/material/Button';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import TextField from '@mui/material/TextField';
import SearchIcon from '@mui/icons-material/Search';
let delayedCallback=null;
export default function ServerFilter(props){
  React.useEffect(()=>{
    delayedCallback = debounce(props.onFilterChange, 200);
  },[]);


  const onFilterChange=(event)=> {
    event.persist();
    delayedCallback(event);
  }
    return (
      <Toolbar>
        <SearchIcon />
        <TextField variant="outlined"
          type="text"
          label="Search..."
          onChange={onFilterChange}
        />
        <Button variant="outlined" onClick={props.onAddClick}>
          Add
        </Button>
        <Button
          variant="outlined"
          onClick={props.onSettingsClick}
        >
          Settings
        </Button>
      </Toolbar>
    );
}
